<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>随便打TCS系统</title>
<script type="text/javascript" src="<%=basePath%>js/initPage.js"></script>
<!-- Bootstrap -->
<link href="<%=basePath%>vendors/bootstrap/dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Font Awesome -->
<link
	href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
	rel="stylesheet">
<!-- NProgress -->
<link href="<%=basePath%>vendors/nprogress/nprogress.css"
	rel="stylesheet">
<!-- iCheck -->
<link href="<%=basePath%>vendors/iCheck/skins/flat/green.css"
	rel="stylesheet">

<!-- bootstrap-progressbar -->
<link
	href="<%=basePath%>vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css"
	rel="stylesheet">
<!-- JQVMap -->
<link href="<%=basePath%>vendors/jqvmap/dist/jqvmap.min.css"
	rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link
	href="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.css"
	rel="stylesheet">

<!-- Custom Theme Style -->
<link href="<%=basePath%>build/css/custom.min.css" rel="stylesheet">
</head>
<%@ include file="loginCheck.jsp"%>
<body class="nav-md">
	<div class="container body">
		<div class="main_container">
			<div class="col-md-3 left_col">
				<div class="left_col scroll-view">
					<div class="clearfix"></div>
					<br />
				</div>
			</div>
			<!-- page content -->
			<div class="right_col" role="main">
				<div class="">
					<div class="page-title">
						<div class="row tile_count">
							<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
								<span class="count_top"><i class="fa fa-user"></i>总通话人数</span>
								<div id="counttotle" class="count">${pages.recordTotal}</div>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
								<span class="count_top"><i class="fa fa-clock-o"></i>总通话消费金额</span>
								<div id="countnew" class="count">${callf}</div>
							</div>
							<div class="title_left"></div>
							<div class="x_content">
								<form id="myForm" method="post" action="callStatisticsIndex">
									用户手机号码：<input type="text" name="mobile" value="${sp.mobile}" />
									所属代理商：<input type="text" name="username" value="${sp.username}" />
									所属商家：<input type="text" name="shopname" value="${sp.shopname}" />
									<input type="hidden" name="currentPageNo" value="1">
									<button type="submit" class="btn btn-default"
										onclick="selectALL('1')">搜索</button>
								</form>
							</div>
							<div class="clearfix"></div>
							<div class="x_panel">
								<div class="x_title">
									<h2>通话消费统计</h2>
									<div class="clearfix"></div>
								</div>
								<div class="x_content">
									<p class="text-muted font-13 m-b-30"></p>
									<table id="datatable"
										class="table table-striped table-bordered">
										<thead>
											<tr>
												<th>当前消费排行</th>
												<th>用户手机号</th>
												<th>所属代理商</th>
												<th>所属商家</th>
												<th>用户剩余通话金额</th>
												<th>用户已消费通话金额</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${subList}" var="s" varStatus="z">
												<tr>
													<td>第${(pages.currentPageNo - 1) * 10 + z.index + 1}名</td>
													<td>${s.mobile}</td>
													<td>${s.shareper}</td>
													<td>${s.shopid}</td>
													<td>${s.aliaccount}</td>
													<td>${s.shopEnddate}</td>
													<td>暂未开放</td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
							<div class="clearfix"></div>
							<br />
						</div>
						<div style="width: 100%; text-align: center;">
							<div id='page'></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		/**
		 * 纯粹的JS分页插件，代码缺点：JS操作DOM冗余太多，太繁琐
		 */ 
		pageUtil.initPage('page', {
			totalCount : '${pages.recordTotal}', //总页数，一般从回调函数中获取。如果没有数据则默认为1页
			curPage : ${pages.currentPageNo}, //初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
			showCount : 9, //分页栏显示的数量
			pageSizeList : [ 10 ], //自定义分页数，默认[5,10,15,20,50]
			defaultPageSize : 10, //默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
			isJump : true, //是否包含跳转功能，默认false
			isPageNum : true, //是否显示分页下拉选择，默认false
			isPN : true, //是否显示上一页和下一面，默认true
			isFL : true, //是否显示首页和末页，默认true
			jump : function(curPage) { //跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
				selectALL(curPage);
			},
		});
	</script>
	<script type="text/javascript">
		function selectALL(curPage) {
			var mobile = $("[name='mobile']").val();
	        var partten = /^(((13[0-9]{1})|(14[579]{1})|(15[^4,\D]{1})|(16[6]{1})|(18[0-9]{1})|(17[^249,\D]{1})|(19[89]{1}))+\d{8})$/;
	        if (mobile.length != 0 && !partten.test(mobile)) {
	     	 	alert('请输入正确的手机号码');
	         	return false;
	       	}
	        var mobile = $("[name='currentPageNo']").val(curPage);
	        return true;
		}
	</script>

	<!-- jQuery -->
	<script src="<%=basePath%>vendors/jquery/dist/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="<%=basePath%>vendors/bootstrap/dist/js/bootstrap.min.js"></script>
	<!-- FastClick -->
	<script src="<%=basePath%>vendors/fastclick/lib/fastclick.js"></script>
	<!-- NProgress -->
	<script src="<%=basePath%>vendors/nprogress/nprogress.js"></script>
	<!-- bootstrap-daterangepicker -->
	<script src="<%=basePath%>vendors/moment/min/moment.min.js"></script>
	<script
		src="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
	<!-- Chart.js -->
	<script src="<%=basePath%>vendors/Chart.js/dist/Chart.min.js"></script>

	<!-- Custom Theme Scripts -->
	<script src="<%=basePath%>build/js/custom.min.js"></script>
</body>
</html>